<template>
	<div>
		<div style="display: flex; justify-content: space-around;">
			<h3>教师管理-{{data.actmsg[data.state]}}</h3>
			<p ><button style="color: blue;" @click="go2Add()">继续添加</button></p>
		</div>
		<div style="width: 80% ; border: blue 1px solid">
			教师编号:<input type="text" v-model="data.tea.uid" readonly>
			<hr>
			教师姓名:<input type="text" v-model="data.tea.uname" :readonly="data.state == 2">
			<hr>
			教师电话:<input type="text" v-model="data.tea.phone" :readonly="data.state == 2">
			<hr>
			教师密码:<input type="text" v-model="data.tea.pwd" :readonly="data.state == 2">
			<hr>

			<div style="width: 100%; height: 8vw;display: flex;justify-content: center;align-items: center;">
				<p><img v-bind:src="pic(data.tea.pic)" style="width: 8vw; height: 8vw;"></p>
				<p v-if="data.state != 2">图片:<input type="file" ref="img" ></p>
			</div>
			
			<hr>
			<button @click="update()" v-show="data.state==0">修改</button>
			<button @click="add()" v-show="data.state==1">添加</button>
		</div>
	</div>
</template>

<script setup>
import { onMounted, reactive } from 'vue'
import router from '@/router'
import logo from '@/assets/logo.png';
import { ref } from 'vue';
import {$get,$postf} from '@/ajax';
import { useRoute } from 'vue-router';
import store from '../../../store';

	const route = useRoute();
	//构建容器初始化存储提交上传缓存空间
	const img= ref(null);
	
	const data = reactive({
		tea: {},
		actmsg: ['修改', '添加','显示'],
		state: -1
	})
	
	const pic = (id) => {
		let pic = `http://127.0.0.1:9000/api/public/showimg/` + id;
		if (id == undefined || id == "") {
			pic = logo;
		}
		return pic;
	}
	
	const go2Add =() => {
		data.state = 1;
		data.tea = {
			uid: 0
		}
	}
	
	const add =() => {
		//设置FormData格式数据
		let fd = new FormData;
		fd.append("uid", 0);
		fd.append("uname", data.tea.uname);
		fd.append("phone", data.tea.phone);
		fd.append("pwd", data.tea.pwd);
		//获取图片信息
		var file = img.value.files[0];
		fd.append("mypic", file);
		
		$postf(`/api/adm/tea/add`, fd).then((resp) => {
				store.state.msg = " 提示：添加成功"
				data.tea = resp.data.data
				data.state=2
			}
		)
	}
	const update =() => {
		//设置FormData格式数据
		var fd = new FormData;
		fd.append("uid", data.tea.uid);
		fd.append("uname", data.tea.uname);
		fd.append("phone", data.tea.phone);
		fd.append("pwd", data.tea.pwd);
		fd.append("pic", data.tea.pic);
		//获取图片信息
		
		var file = img.value.files[0];
		fd.append("mypic", file);
		
		$postf(`/api/adm/tea/update`, fd).then((resp) => {
				store.state.msg = " 提示：修改成功"
				data.tea = resp.data.data
				data.state=2
			}
		)
	}
	

	onMounted(() => {
		let id = route.query.uid;
			if (id != "0"){
				$get(`/api/adm/tea/findById/`+id).then((resp) => {
					data.tea = resp.data.data
					data.state = 0
				})
			}
			if (id == "0") { //添加
				data.tea = {
					uid: 0
				};
				data.state = 1;
			}
	})
</script>

<style>
</style>
